<template>
  <div class="contbox6_10">
    <div class="titlelist6_10 titles" style="box-shadow:none;position: fixed;z-index:5">
        采购管理
        <span style="color: #999; font-size: 16px">
          &nbsp;&nbsp;
          <span style="font-size: 16px; color: #2f2c29">/</span>
          &nbsp;&nbsp; </span
        >查看详情
      </div>
    <div style="clear:both;height:50px"></div>
    <div class="title">
      <div>
        <div class="head" style="padding-bottom:40px">基本信息</div>
        <el-col>
          <div class="lister">
            <div class="list">
              <div class="subTitle">下单机构:</div>
              <div class="subVal">{{ datas.officeName }}</div>
            </div>
            <div class="list">
              <div class="subTitle">采购机构:</div>
              <div class="subVal">{{ datas.fromOfficeName }}</div>
            </div>
            <div class="list">
              <div class="subTitle">采购类型:</div>
              <div class="subVal">直采</div>
            </div>
          </div>
        </el-col>
        <el-col style="margin-top: 5px">
          <div class="lister">
            <div class="list">
              <div class="subTitle">收货联系人:</div>
              <div class="subVal">{{ datas.linkName }}</div>
            </div>
            <div class="list">
              <div class="subTitle">联系人电话:</div>
              <div class="subVal">{{ datas.linkPhone }}</div>
            </div>
            <div class="list" style="width: 300px">
              <div class="subTitle">收货地址:</div>
              <div
                class="subVal ellipsis"
                :title="str + datas.detailAddr"
                style="width: 120px; height: 20px"
              >
                {{ datas.addr }}
              </div>
            </div>
          </div>
        </el-col>
      </div>
      <div style="clear: both"></div>
      <div>
        <header class="head" style="margin-top: 30px">终端信息</header>
        <el-col>
          <div class="lister">
            <div class="list">
              <div class="subTitle">政策标识:</div>
              <div class="subVal">{{ datas.policyCode }}</div>
            </div>
            <div class="list">
              <div class="subTitle">终端类型:</div>
              <div class="subVal">{{ datas.productLabel }}</div>
            </div>
            <div class="list">
              <div class="subTitle">采购单价:</div>
              <div class="subVal">{{ datas.unitAmt }}元</div>
            </div>
          </div>
        </el-col>
        <el-col style="margin-top: 5px">
          <div class="lister">
            <div class="list">
              <div class="subTitle">采购数量:</div>
              <div class="subVal">{{ datas.buyNumber }}个</div>
            </div>
            <div class="list">
              <div class="subTitle">采购总价:</div>
              <div class="subVal">{{ datas.amount }}元</div>
            </div>
            <div class="list" v-if="datas.orderStatus != 1">
              <div class="subTitle">备注:</div>
              <div class="subVal overhid ellipsis" :title="datas.remarks">
                <span v-if="datas.remarks && datas.remarks.length >= 1">{{
                  datas.remarks
                }}</span>
                <span v-else>无</span>
              </div>
            </div>
          </div>
        </el-col>
      </div>
      <div style="clear: both"></div>
      <div>
        <header class="head" style="margin-top: 30px">采购单状态信息</header>
        <el-col style="margin-top: 5px">
          <div class="" v-if="datas.orderStatus == 1">
            <div style="display: flex">
              <div class="list">
                <div class="subTitle">最新进展:</div>
                <div class="subVal">代理商已取消</div>
              </div>
              <div class="list">
                <div class="subTitle">取消时间:</div>
                <div class="subVal">
                  {{ datas.updateDate }}
                </div>
              </div>
            </div>
            <div class="list" style="display: flex; width: 300px">
              <div class="subTitle">取消原因:</div>
              <div
                class="subVal overhid ellipsis"
                style="width: 800px"
                :title="datas.remarks"
              >
                <span>{{ datas.remarks }}</span>
              </div>
            </div>
          </div>
          <div class="lister" v-else>
            <div style="display: flex" v-if="datas.checkStatus == 1">
              <div class="list">
                <div class="subTitle">最新进展:</div>
                <div class="subVal">一级服务商待审核</div>
              </div>
              <div class="list">
                <div class="subTitle">下单时间:</div>
                <div class="subVal">
                  {{ datas.updateDate }}
                </div>
              </div>
            </div>
            <div style="display: flex" v-if="datas.checkStatus == 2">
              <div class="list">
                <div class="subTitle">最新进展:</div>
                <div class="subVal">一级服务商已通过</div>
              </div>
              <div class="list">
                <div class="subTitle">通过时间:</div>
                <div class="subVal">
                  {{ datas.updateDate }}
                </div>
              </div>
            </div>
            <div v-if="datas.checkStatus == 3">
              <div style="display: flex">
                <div class="list">
                  <div class="subTitle">最新进展:</div>
                  <div class="subVal">一级服务商已驳回</div>
                </div>
                <div class="list">
                  <div class="subTitle">驳回时间:</div>
                  <div class="subVal">
                    {{ datas.updateDate }}
                  </div>
                </div>
              </div>
              <div class="list" style="margin-top: 10px">
                <div class="subTitle">驳回原因:</div>
                <div
                  class="subVal overhid ellipsis"
                  :title="datas.fristChkMemo"
                >
                  <span>{{ datas.fristChkMemo }}</span>
                </div>
              </div>
            </div>
            <div v-if="datas.checkStatus == 4">
              <div style="display: flex">
                <div class="list">
                  <div class="subTitle">最新进展:</div>
                  <div class="subVal">代理商已打款</div>
                </div>
                <div class="list">
                  <div class="subTitle">上传凭证时间:</div>
                  <div class="subVal">
                    {{ datas.updateDate }}
                  </div>
                </div>
              </div>
              <div class="list" style="width: 800px; margin-top: 20px">
                <div class="subTitle">打款图片:</div>
                <div class="picList" style="display: flex">
                  <div
                    class="lista"
                    style="width: 140px; height: 140px; margin-right: 10px"
                    v-for="(item, index) in datas1"
                    :key="index"
                  >
                    <img
                      :src="item.imgUrl"
                      style="width: 100%; height: 100%"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div v-if="datas.checkStatus == 5">
              <div style="display: flex">
                <div class="list">
                  <div class="subTitle">最新进展:</div>
                  <div class="subVal">海科已通过</div>
                </div>
                <div class="list">
                  <div class="subTitle">通过时间:</div>
                  <div class="subVal">
                    {{ datas.updateDate }}
                  </div>
                </div>
              </div>
              <div class="list" style="width: 800px; margin-top: 20px">
                <div class="subTitle" style="margin-left: -13px">
                  已打款凭证:
                </div>
                <div
                  class="subVal"
                  v-for="(item, index) in datas1"
                  :key="index"
                  style="width: 100px; height: 100px"
                >
                  <img
                    :src="item.imgUrl"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div>
            </div>
            <div v-if="datas.checkStatus == 6">
              <div>
                <div style="display: flex">
                  <div class="list">
                    <div class="subTitle">最新进展:</div>
                    <div class="subVal">海科已驳回</div>
                  </div>
                  <div class="list">
                    <div class="subTitle">驳回时间:</div>
                    <div class="subVal">
                      {{ datas.updateDate }}
                    </div>
                  </div>
                </div>

                <div class="list" style="margin-top: 12px">
                  <div class="subTitle">驳回原因:</div>
                  <div class="subVal" :title="datas.secondChkMemo">
                    <span v-if="datas.secondChkMemo.length >= 1">{{
                      datas.secondChkMemo
                    }}</span>
                    <span v-else>无</span>
                  </div>
                </div>
              </div>
              <div class="list" style="width: 800px; margin-top: 20px">
                <div class="subTitle" style="margin-left: -13px">
                  已打款凭证:
                </div>
                <div
                  class="subVal"
                  v-for="(item, index) in datas1"
                  :key="index"
                  style="width: 100px; height: 100px"
                >
                  <img
                    :src="item.imgUrl"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col style="margin-top: 5px">
          <div class="lister">
            <div class="list" v-if="checkStatus == 4">
              <div class="subTitle">打款图片:</div>
              <div class="subVal" style="width: 140px; height: 140px">
                这里是图片
              </div>
            </div>
          </div>
        </el-col>
      </div>
      <div style="clear: both"></div>
      <div class="footBox" style="margin-top: 60px">
        <!-- <el-button
          plain
          @click="handBack"
          class="bankList"
          type="primary"
          style="
            margin-left: -70px;
            border: 1px solid #409eff;
            background: white;
          "
          >返回</el-button
          
        > -->
        <el-button type="primary" plain @click="handBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import axios from "axios";
import https from "../../plugins/https"
export default {
  data() {
    return {
      orderCode: "",
      datas: {},
      datas1: null,
      str: "", //省市县
      statusInfo: "", //状态
      reason: "", //原因
    };
  },
  created() {
    console.log("下面是ordercode");
    console.log(this.$route.query.orderCode);
    this.orderCode = this.$route.query.orderCode;
    this.getData(); //这个是调用回显的
  },
  methods: {
    getData() {
      https.catOrderDetail({ orderCode: this.orderCode })
        .then((res) => {
          console.log("回显的数据");
          console.log(res);
//           layer.open({
//               content: res.data.msg,
//               skin: "msg",
//               time: 1 //1秒后自动关闭
//             });
          this.datas = res.data.data[0][0];
          this.datas1 = res.data.data[1];
          
          // var ads1 = CodeToText[this.datas.province];
          // var ads2 = CodeToText[this.datas.city];
          // var ads3 = CodeToText[this.datas.county];
          // this.str = ads1 + ads2 + ads3;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handBack() {
      this.$router.push({
        name: "purchase",
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 98%;
  margin: 0 auto;
  background-color: #f9fafc;
  height: 40px;
  font-size: 18px;
  /* font-weight: bold; */
  color: #303133;
  padding-left: 20px;
  box-sizing: border-box;
  line-height: 40px;
  margin-bottom: 30px;
}
.list {
  display: flex;
  /* justify-content: space-between; */
  width: 300px;
  box-sizing: border-box;
  padding-left: 30px;
}
.lister {
  display: flex;
}
.subTitle {
  width: 100px;
  color: #909399;
  text-align: right;
}
.subVal {
  margin-left: 5px;
  color: #303133;
  width: 200px !important;
}
.backs {
  width: 100px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  margin-top: 90px;
  border: 1px solid #00beff;
  color: #00beff;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
}
.ellipsis {
  white-space: nowrap;
  /*空白不换行*/
  overflow: hidden;
  /*溢出隐藏*/
  text-overflow: ellipsis;
  /*显示省略号*/
}
.overhid {
  width: 170px;
  cursor: default;
}
.footBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.bankList:hover {
  color: #00beff;
}
</style>